<template>
  <div>
    <Row>
      <Col :span="6" class="form-box">
        <Form ref="form" :label-width="100">
          <FormItem label="选择用户">
            <Select v-model="userId" @on-change="search">
              <Option :value="item.user_id" v-for="(item,index) in users" :key="index">{{ item.user_name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="当前角色">
            <Input readonly :value="roleZhName"></Input>
          </FormItem>
        </Form>
        <p style="text-align: center">当前的权限树</p>
        <br/>
        <div class="menu-container">
          <Tree :data="treeData"></Tree>
        </div>
      </Col>

      <Col :span="17" :offset="1" class="form-box">
        <Form ref="form" :label-width="100" inline>
          <FormItem label="修改角色为">
            <Select v-model="roleId" style="width: 200px" @on-change="loadRoleMenu">
              <Option :value="item.roleId" v-for="(item,index) in roleList" :key="index+1">
                {{ item.roleExplain }}
              </Option>
            </Select>
          </FormItem>

          <FormItem>
            <Button type="primary" @click="confirm()">确认修改</Button>
            <Button type="success" @click="addRoleMenu()" style="margin-left: 40px;">新增菜单权限</Button>
          </FormItem>
        </Form>
        <div class="table-container">
          <Table border :max-height="900" stripe :columns="getCols()" :data="tableData" no-data-text="未查询到数据">
          </Table>
        </div>
      </Col>
    </Row>

    <Modal v-model="isShowAddMenu" title="添加菜单数据" @on-ok="submitAdd">
      <CheckboxGroup v-model="selectMenuId" class="box-col">
        <Checkbox v-for="item in allMenu" :disabled="menuState(item.menuId)" :label="item.menuId" border>
          {{ item.menuName }}
        </Checkbox>
      </CheckboxGroup>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "authority",
  mounted() {
    this.loadUserList()
    this.loadRoleList()
  },
  data() {
    return {
      users: [],
      userId: '',
      menus: [],
      roleId: '',
      roleName: '',
      userRoleId: '',
      treeData: [],
      roleZhName: '',
      roleList: [],
      tableData: [],
      allMenu: [],
      isShowAddMenu: false,
      selectMenuId: [],
      localMenuIds: [],
      currentMenuIds: []
    }
  },
  methods: {
    menuState(val) {
      debugger
      return this.currentMenuIds.includes(val);
    },
    addRoleMenu() {
      let that = this;
      that.$http.get('/account/allMenu').then(res => {
        that.allMenu = res
        that.isShowAddMenu = true
      }).catch(() => {
        that.$Message.error("获取所有菜单数据失败")
      })
    },
    submitAdd() {
      let params = {}
      params.roleId = this.roleId;
      params.menuIds = this.selectMenuId;
      let that = this;
      that.$http.postJson('/account/addRoleMenu', params).then(res => {
        that.$Message.success("修改角色菜单成功")
        window.location.reload()
      }).catch(() => {
        that.$Message.error("修改角色菜单失败")
      })
    },
    loadUserList() {
      let that = this;
      this.$http.get('/authority/user/list').then(res => {
        that.users = res ? res : [];
      })
    },
    search() {
      let that = this;
      that.$http.get('/authority/user/menu?userId=' + that.userId).then(res => {
        that.roleName = res.roleName ? res.roleName : ''
        that.roleZhName = res.roleZhName ? res.roleZhName : ''
        that.userRoleId = res.userRoleId ? res.userRoleId : undefined
        that.roleId = res.roleId ? res.roleId : undefined
        that.buildTree(res.menu)
        that.loadRoleMenu()
      }).catch(() => {
        that.roleName = ''
        that.roleZhName = ''
        that.userRoleId = ''
        that.roleId = ''
        that.buildTree(null)
      })
    },
    buildTree(data) {
      if (!data) {
        this.treeData = []
        return;
      }
      this.treeData = []
      let top = {
        title: this.roleZhName,
        expand: true,
        children: []
      }
      for (let item of data) {
        let obj = {}
        obj.title = item.menuName
        top.children.push(obj)
      }
      this.treeData.push(top)
    },
    loadRoleList() {
      let that = this;
      that.$http.get('/authority/role/list').then(res => {
        that.roleList = res
      }).catch(() => {
        that.roleList = []
      })
    },
    loadRoleMenu() {
      let that = this;
      if (!that.roleId) {
        return false;
      }
      that.$http.get('/authority/role/menu?roleId=' + that.roleId).then(res => {
        if (res) {
          that.tableData = res
          that.currentMenuIds = []
          for (let item of res) {
            that.currentMenuIds.push(item.menuId)
          }
        } else {
          that.tableData = []
        }
      }).catch(() => {
        that.tableData = []
      })
    },
    getCols() {
      let that = this;
      return [
        {title: '角色ID', key: 'roleId', tooltip: true, align: 'center', width: 150},
        {title: '角色名', key: 'roleName', tooltip: true, align: 'center'},
        {title: '角色菜单ID', key: 'roleMenuId', tooltip: true, align: 'center', width: 150},
        {title: '菜单ID', key: 'menuId', tooltip: true, align: 'center', width: 150},
        {title: '菜单URL', key: 'menuUrl', tooltip: true, align: 'center'},
        {title: '菜单名字', key: 'menuName', tooltip: true, align: 'center'},
        {
          title: '操作', key: 'operator', tooltip: true, align: 'center', render(h, obj) {
            return h(('Button'), {
              attrs: {type: 'success'}, on: {
                click: () => {
                  that.deleteMenu(obj.row.roleMenuId)
                }
              }
            }, '删除该项')
          }
        }
      ]
    },
    confirm() {
      let that = this;
      let params = {}
      params.userId = this.userId
      params.roleId = this.roleId
      params.userRoleId = this.userRoleId
      that.$http.postJson('/authority/role/update', params).then(res => {
        that.$Message.success('更新成功')
        that.loadRoleMenu()
      }).catch(() => {
        that.$Message.success('更新失败')
        that.loadRoleMenu()
      })
    },
    deleteMenu(val) {
      let that = this;
      that.$http.postForm('/authority/role/delete', 'roleMenuId=' + val).then(res => {
        that.$Message.success('刪除成功')
        window.location.reload()
      }).catch(() => {
        that.$Message.error('刪除失敗')
        that.loadRoleMenu()
      })
    }
  }
}
</script>

<style scoped>
.form-box {
  margin-top: 20px;
}

.table-container {
  margin: 0 auto;
  width: calc(100% - 40px);
}

.page-container {
  display: flex;
  width: calc(100% - 40px);
  justify-content: flex-end;
  margin-top: 20px;
}

.menu-container {
  width: calc(100% - 60px);
  margin: 10px auto;
}

.box-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-row-gap: 20px;
}
</style>
